<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ PC官方网站</title>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="shortcut icon" href="qq.ico"/>

</head>
<body>
<div id="header">
    <div class="headertop">
        <div class="top-left fl"><img src="images/pclogo.png" alt=""/></div>
        <div class="top-right fr">
                <div class="qq-nav ">
                    <a href="javascript:void(0)">QQ官网首页</a>&nbsp;&nbsp;|&nbsp;
                    <a href="javascript:void(0)">博客</a>&nbsp;|&nbsp;
                    <a href="javascript:void(0)">微博</a>&nbsp;|&nbsp;
                    <a href="javascript:void(0)">申请QQ</a>
                </div>
            <div class="number">
                <img src="images/xymap.png" >
                当前在线人数：234，596，170 &nbsp;最高在线人数：259，478，960
            </div>
        </div>
    </div>
    <div class="header-column1 fl">
        <div class="column1-pic1"><img src="images/b_4_1.png" ></div>
        <div class="column1-pic2"><img src="images/b_4_2.png" ></div>
        <div class="column1-pic3"><img src="images/intro_txt_1.png" ></div>
        <div class="column1-qq83"><img src="images/1392709767_big.png" id="er" width="100px" height="100px">
            <img src="images/ver83.png" id="two"></div>
        <div class="column1-download"></div>
        <div class="experience"><img src="images/normal.png" alt=""/></div>
    </div>


    <div class="next">
        <div class="nextpic fl">
            <img src="images/sled.png" class="sled">
            <img src="images/unsl.png" class="unsl">
        </div>
        <div class="nextpic fl"><img src="images/sled.png" class="sled">
            <img src="images/unsl.png" class="unsl"></div>
        <div class="nextpic fl"><img src="images/sled.png" class="sled">
            <img src="images/unsl.png" class="unsl"></div>
        <div class="nextpic fl"><img src="images/sled.png" class="sled">
            <img src="images/unsl.png" class="unsl"></div>
    </div>
</div>
<div id="content">
    <div class="content-reply">
        <div class="reply-pic"><img src="images/fig_33.png" alt=""/></div>
        <div class="reply-word1"><img src="images/intro_txt_3.png" alt=""/></div>
    </div>
    <div class="content-homework">
        <div class="homeworkleft"><img src="images/fig_32.png" alt=""/></div>
        <div class="homeworkword1"><img src="images/intro_txt_32.png" alt=""/></div>
    </div>
    <div class="content-asist">
        <div class="asistleft"><img src="images/fig_30_1.png" alt=""/></div>
        <div class="asistword"><img src="images/intro_txt_30.png" alt=""/></div>
    </div>
    <div class="content-file">
        <div class="fileleft"><img src="images/fig_29.png" alt=""/></div>
        <div class="fileword"><img src="images/intro_txt_29.png" alt=""/></div>
    </div>
    <div class="content-pic">
        <div class="picleft"><img src="images/fig_5_2.png" alt=""/></div>
        <div class="picword"><img src="images/intro_txt_28.png" alt=""/></div>
    </div>
    <div class="contentMore">
        <div class="searchmore"><a href="javascript:void(0)">查看更多</a></div>
    </div>
    <div class="content-tel more">
        <div class="telleft"><img src="images/fig_6_2.png" alt=""/></div>
        <div class="telright"><img src="images/intro_txt_26_1.png" alt=""/></div>
    </div>
    <div class="content-qqcut more"></div>
    <div class="content-video more"></div>
</div>
<div id="foot">
    <span>Copyright&copy;1998-2016 Tencent.Allrights Reserve</span><br/>
    <span>腾讯公司&nbsp;版权所有</span>
</div>


<script src="common.js"></script>
<script src="animate.js"></script>
<script src="jquery-1.12.4.js"></script>
<script>
//按住查看更多，下面的三个框框出现
    var header=my$("header")
    var content=my$("content");
    var contentMore=content.children[5];
    var searchmore=contentMore.children[0];
    var next=header.children[2]
var two =my$("two")
var er=my$("er")
two.onmouseover= function () {
    er.style.display="block"
}
two.onmouseout= function () {
    er.style.display="none"
}
    next.children[0].onmouseover=function () {
        this.children[0].style.display="block"
        this.children[1].style.display="none"

    }
next.children[0].onmouseout=function () {
    this.children[0].style.display="none"
    this.children[1].style.display="block"

}

next.children[1].onmouseover=function () {
    this.children[0].style.display="block"
    this.children[1].style.display="none"

}
next.children[1].onmouseout=function () {
    this.children[0].style.display="none"
    this.children[1].style.display="block"

}
next.children[2].onmouseover=function () {
    this.children[0].style.display="block"
    this.children[1].style.display="none"

}
next.children[2].onmouseout=function () {
    this.children[0].style.display="none"
    this.children[1].style.display="block"

}
next.children[3].onmouseover=function () {
    this.children[0].style.display="block"
    this.children[1].style.display="none"

}
next.children[3].onmouseout=function () {
    this.children[0].style.display="none"
    this.children[1].style.display="block"

}
    var cont1=content.children[6];
    var cont2=content.children[7];
    var cont3=content.children[8];
    searchmore.onclick=function(){
        cont1.removeAttribute("class");
        cont1.className="content-tel";
        cont2.removeAttribute("class");
        cont2.className="content-qqcut";
        cont3.removeAttribute("class");
        cont3.className="content-video";
        contentMore.removeAttribute("class");
        searchmore.style.display="none";
    }
//这个效果结束
//column-pic1动画效果
    var columnpic1=header.children[1].children[0]
    var columnpic2=header.children[1].children[1]
    var columnpic3=header.children[1].children[2]
    move()
    function move(){
        animate(columnpic1,{left:160})
        animate(columnpic2,{left:440,opacity:1})
        animate(columnpic3,{right:193,opacity:1})
    }

    var experience=header.children[1].lastElementChild

    experience.onmouseover=function(){
        this.style.opacity=0.5
    }
    experience.onmouseout=function(){
        this.style.opacity=1
    }

//开始第san个框框
    function getScroll() {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
        return {
            scrollTop: scrollTop,
            scrollLeft : scrollLeft
        };
    }
    var replypic=content.children[0].children[0]
    var homeworkpic=content.children[1].children[0]
    var homeworkword=content.children[1].children[1]
    var asistpic=content.children[2].children[0]
    var filepic=content.children[3].children[0]
    var picleft=content.children[4].children[0]
    var telleft=content.children[6].children[0]
    window.onscroll=function(){
        if(getScroll().scrollTop>=680 ){
            animate(replypic,{top:800})

        }
        if(getScroll().scrollTop>=1380 ){
            animate(homeworkpic,{left:80})
            animate(homeworkword,{right:255})
        }
        if(getScroll().scrollTop>=2100 ){
            animate(asistpic,{left:250})
        }
        if(getScroll().scrollTop>=2880 ){
            animate(filepic,{left:180})
        }
        if(getScroll().scrollTop>=3600 ){
            animate(picleft,{left:80})
        }
        if(getScroll().scrollTop>=4220 ){
            animate(telleft,{left:180})
        }
    }







</script>
</body>
</html>